<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>商品管理-列表</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="/resources/layui/css/layui.css" media="all">
<link rel="stylesheet" type="text/css" href="/resources/zTree/css/metroStyle/metroStyle.css">
<link rel="stylesheet" href="/resources/zTree/plugin/css/index.css" media="all">

</head>
<body>
	<!-- 搜索开始 -->
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  		<legend>查询条件</legend>
	</fieldset>
	<form class="layui-form" action="" id="searchFrm" >
		<div class="layui-form-item" style="text-align: center">
		    <div class="layui-inline">
		      <label class="layui-form-label">商品名称</label>
		      <div class="layui-input-inline">
		        <input type="text" name="goodsname"  autocomplete="off" class="layui-input">
		      </div>
		    </div>
		    <div class="layui-inline">
		      <label class="layui-form-label">商品批号</label>
		      <div class="layui-input-inline">
		        <input type="text" name="productcode"   autocomplete="off" class="layui-input">
		      </div>
		    </div>
		    <div class="layui-inline">
		      <label class="layui-form-label">商品规格</label>
		      <div class="layui-input-inline">
		        <input type="text" name="size"  autocomplete="off" class="layui-input">
		      </div>
		    </div>
	  </div>
	  <div class="layui-form-item" style="text-align: center;">
		    <div class="layui-input-block">
		      <button type="button" class="layui-btn" id="doSearch">查询</button>
		      <button type="reset" class="layui-btn layui-btn-primary" >重置</button>
		    </div>
  	 </div>
	</form>
	<!-- 搜索结束-->
	
	<!-- 表格数据开始 -->
	<table class="layui-hide" id="goodsList" lay-filter="goodsList"></table>
	<div id="tableToolBar" style="display: none;">
		<button type="button" class="layui-btn layui-btn-sm" lay-event="add" shiro:hasPermission="goods:create">添加</button>
		<button type="button" class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchdelete" shiro:hasPermission="goods:batchdelete">批量删除</button>
	</div>
	<div id="tableCellToolBar" style="display: none;">
		<button type="button" class="layui-btn layui-btn-sm  layui-btn-warm" lay-event="update" shiro:hasPermission="goods:update">修改</button>
		<button type="button" class="layui-btn layui-btn-sm  layui-btn-danger" lay-event="delete" shiro:hasPermission="goods:delete">删除</button>
	</div>
	<!-- 表格数据结束-->
	
	<!-- 添加。修改弹出层开始 -->
	<div id="dlg" style="display: none;margin: 10px">
	<form method="post" class="layui-form" id="dataFrm" lay-filter="dataFrm">
	<div class="layui-form-item">
		<div class="layui-inline">
		      <label class="layui-form-label">供应商</label>
		      <div class="layui-input-inline">
		      	<input type="hidden" name="id">
		      	<select name="providerid" id="providerid" lay-verify="">
				  <option value="">请选择供应商</option>
				</select> 
		      </div>
		</div>
			<div class="layui-inline">
				<label class="layui-form-label">商品名称</label>
				<div class="layui-input-block">
					<input type="text" name="goodsname" lay-verify="required"
						placeholder="请输入商品名称" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">产地</label>
				<div class="layui-input-inline">
					<input type="text" name="produceplace" lay-verify="required"
						autocomplete="off" class="layui-input">
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">规格</label>
				<div class="layui-input-block">
					<input type="text" name="size" lay-verify="required"
						 autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">包装</label>
				<div class="layui-input-inline">
					<input type="text" name="goodspackage" lay-verify="required"
						autocomplete="off" class="layui-input">
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">生产批号</label>
				<div class="layui-input-inline">
					<input type="text" name="productcode" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">批准文号</label>
				<div class="layui-input-inline">
					<input type="text" name="promitcode" autocomplete="off"
						class="layui-input">
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">销售参考价格</label>
				<div class="layui-input-inline">
					<input type="text" name="price" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">是否可用</label>
				<div class="layui-input-inline">
					<input type="radio" name="available" value="1" title="是" checked="">
					<input type="radio" name="available" value="0" title="否">
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">库存</label>
				<div class="layui-input-inline">
					<input type="text" name="number" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">预警库存</label>
				<div class="layui-input-inline">
					<input type="text" name="dangernum" autocomplete="off"
						class="layui-input">
				</div>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">商品备注</label>
			<div class="layui-input-block">
				<input type="text" name="description" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<div class="layui-form-item layui-form-text">
			<label class="layui-form-label">商品图片</label>
			<div class="layui-upload">
				<img class="layui-upload-img" width="100px" height="80px" id="goodsimg_img">
				<button type="button" class="layui-btn" id="goodspath">上传图片</button>
				<span id="goodsText"></span>
				<input type="hidden" name="goodsimg" id="goodsimg" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item" style="text-align: center;">
			 <button class="layui-btn" lay-submit="" lay-filter="doSubmit">提交</button>
			 <button type="reset" class="layui-btn layui-btn-warm">重置</button>
		</div>
	</form>
	</div>
	<!-- 添加。修改弹出层结束 -->
</body>
<script type="text/javascript" src="/resources/layui/layui.js"></script>
<script type="text/javascript" src="/resources/zTree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/resources/zTree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="/resources/zTree/plugin/js/selectTree.js"></script>

<script type="text/javascript">
var tableIns;
layui.use([ 'layer', 'jquery', 'table', 'form', 'upload' ], function() {
	var layer = layui.layer;
	var $ = layui.jquery;
	var table = layui.table;
	var form = layui.form;
	var upload = layui.upload;
	//渲染表格
	 tableIns = table.render({
		elem : '#goodsList', 
		url : '/goods/loadAllGoods',
		cellMinWidth : 80, 
		page : true, 
		toolbar : '#tableToolBar',
		defaultToolbar : [ 'filter', 'print' ], 
		height:'430px',
		cols : [ [ { type : 'checkbox', width : 80 }, 
			{ field : 'id', width : 80, title : '商品ID', align : 'center'},
			{field : 'goodsname',width : 140,title : '商品名称',align : 'center'},
			{field : 'providername',width : 120,title : '供应商名称',align : 'center'}, 
			{field : 'produceplace',width : 120,title : '商品产地',align : 'center'}, 
			{field : 'size',title : '商品规格',width : 150,align : 'center'},
			{field : 'goodspackage',title : '商品包装',width : 100,align : 'center'},
			{field : 'productcode',width : 140,title : '生产批号',align : 'center'}, 
			{field : 'promitcode',width : 140,title : '批准文号',align : 'center'},
			{field : 'price',title : '零售价',align : 'center'},
			{field : 'description',title : '商品备注',width : 160,align : 'center'},
			{field : 'number',title : '商品库存',width : 120,align : 'center'},
			{field : 'goodsimg',title : '商品图片',width : 140,align : 'center',templet:function(d){
				return '<img src=/upload/showImage?path='+d.goodsimg+' width=30px />'
			}},
			{field : 'available',width : 100,align : 'center',title : '是否可用',templet:function(d){
				return d.available==1?'<font color=blue>是</font>':'<font color=red>否</font>'
			}}, 
			{width : 137,title : '操作',align : 'center',toolbar : "#tableCellToolBar",fixed : 'right',align : 'center'
		} ] ]
	});

	//刷新表格
	$("#doSearch").click(function() {
		var params=$("#searchFrm").serialize();
		tableIns.reload({
			url : '/goods/loadAllGoods?'+params,
		});
	})
	
	//监听表头事件
	table.on('toolbar(goodsList)', function(obj){
	  var checkStatus = table.checkStatus(obj.config.id);
	  switch(obj.event){
	    case 'add':
	      openAdd();
	    break;
	    case 'batchdelete':
		  batchdelete();
		break;
	  };
	});
	
	function batchdelete(){
		var checkStatus = table.checkStatus('goodsList');
    	var data = checkStatus.data;
    	if(data.length>0){
    		layer.confirm('确定要删除选中的所有商品吗?', function(index){
    			var ids = "";
    			for(var i=0;i<data.length;i++){
    				if(i==0){
    					ids += "ids="+data[i].id; 
    				}else{
    					ids += "&ids="+data[i].id;
    				}
    			}
    			$.post("/goods/batchDelete?"+ids,function(obj){
    				layer.msg(obj.msg);
    	            tableIns.reload();
    	            layer.close(index);
    			});
    	    })
    	}else{
    		layer.msg("请选择删除项");
    	}
	}
	
	//监听行工具条
	table.on('tool(goodsList)', function(obj){ 
	  var data = obj.data; //获得当前行数据
	  var layEvent = obj.event; 
	  if(layEvent === 'update'){ //更新
		  openUpdate(data);
	  } else if(layEvent === 'delete'){ //删除
	      deleteDept(data);
	  }
	});
	
	//打开添加的弹出层
	var url=""
	var mainIndex;//弹出层的索引
	 function openAdd(){
		 mainIndex=layer.open({
			title:'添加商品',
			type:1,
			area:['700px','610px'],
			content:$("#dlg"),
			success:function(layero, index){
				$("#dataFrm")[0].reset();
				$("#goodsimg_img").attr({src:'/resources/images/defaultgoodsimg.jpg'});
				 //初始化文件上传的
				var uploadInst = upload.render({
							elem : '#goodspath',
							url : '/upload/uploadFile',
							accept:'images',
							acceptMime:'image/*',
							field:'mf',
							before : function(obj) {
								//预读本地文件示例，不支持ie8
								obj.preview(function(index, file,
										result) {
									$('#goodsimg_img').attr('src', result); //图片链接（base64）
								});
							},
							done : function(res) {
								//如果上传失败
								if (res.code < 0) {
									return layer.msg('上传失败');
								}
								//上传成功
								$('#goodsimg').val(res.path);
							},
							error : function() {
								//演示失败状态，并实现重传
								var goodsText = $('#goodsText');
								goodsText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs goods-reload">重试</a>');
								goodsText.find('.goods-reload').on(
										'click', function() {
											uploadInst.upload();
										});
							}
						});
				url="/goods/addGoods";
			}
		});
	}
	//打开修改弹出层
	function openUpdate(data){
		 mainIndex=layer.open({
				title:'修改商品',
				type:1,
				area:['700px','610px'],
				content:$("#dlg"),
				success:function(layero, index){
					$("#dataFrm")[0].reset();
					//加载默认数据
					form.val('dataFrm',data);
					 $("#goodsimg_img").attr({src:'/upload/showImage?path='+data.goodsimg});
					url="/goods/updateGoods";
				}
			});
	}
	//做保存
	form.on("submit(doSubmit)",function(data){
		var params=$("#dataFrm").serialize();
		$.post(url,params,function(obj){
			if(obj.code==200){
				layer.msg(obj.msg);
				layer.close(mainIndex);
				//刷新表格
				tableIns.reload();
			}else{
				layer.msg(obj.msg);
			}
		});
		return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
	})
	
	
	function deleteDept(data){
		layer.confirm("确定要删除【"+data.goodsname+"】这个商品吗?",function(index){
			$.post("/goods/deleteGoods?id="+data.id,function(obj){
				layer.msg(obj.msg);
				layer.close(index);
				//刷新表格
				tableIns.reload();
		});
		});
	};
});
//左边的树刷新表格
function reloadTable(id){
	tableIns.reload({
		url : '/goods/loadAllGoods?providerid='+id,
	});
}

//加载添加修改供应商的下拉框
function loadProviderSelect(){
	$.post("/provider/loadProviderSelect",function(obj){
			var providerSelect = $("#providerid");
		if(obj.length>0){
			for(var i=0;i<obj.length;i++){
				providerSelect.append("<option value="+obj[i].id+">"+obj[i].providername+"</option>");
			}
		}
	});
};
loadProviderSelect();

</script>
</html>
